<template>
  <div v-if="filterNames && filterNames.length" class="filter-layout-wapper">
    <p class="label">{{ dataObj.label }}：</p>
    <p
      v-if="showAll"
      class="all"
      :class="{ active: active.length === 0 }"
      @click="handleItemClick('all')"
    >
      全部
    </p>
    <ul class="filter-names-ul" :class="{ 'no-all': !showAll }">
      <li
        v-for="item in filterNames"
        :key="item.value"
        class="filter-names-li"
        :class="{ active: active.includes(item.value) }"
        @click="handleItemClick(item.value)"
      >
        {{ item.label }}
      </li>
    </ul>
    <p v-if="dataCount" class="open" @click="handleOpenBtn">
      {{ isOpen ? '收起-' : '展开+' }}
    </p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
interface FilterName {
  label: string
  value: string
}
interface FilterData {
  label: string // 过滤器名称
  key: string // 过滤器key
  checked: FilterName[] // 选中的项
  filterNames: FilterName[] // 过滤器筛选项
}
export default Vue.extend({
  components: {},
  props: {
    defaultActive: {
      type: Array,
      default: () => {},
    },

    showAll: {
      type: Boolean,
      default: true,
    },
    checkedNodes: {
      type: Object,
      default: () => ({}),
    },
    // 一行显示几个选项，0 不限制
    dataCount: {
      type: Number,
      default: 0,
    },
    // 是否多选，默认false
    multiple: {
      type: Boolean,
      default: false,
    },

    dataObj: {
      type: Object as PropType<FilterData>,
      default: () => ({
        label: '名称',
        key: 'keyword',
        checked: [],
        filterNames: [
          {
            value: '1',
            label: '选项1',
          },
          {
            value: '2',
            label: '选项2',
          },
          {
            value: '3',
            label: '选项3',
          },
          {
            value: '4',
            label: '选项4',
          },
        ],
      }),
    },
  },
  data() {
    return {
      active: [],
      isOpen: false,
    }
  },
  computed: {
    filterNames() {
      const { dataCount, isOpen } = this
      if (dataCount && !isOpen) {
        return this.dataObj.filterNames.slice(0, dataCount)
      } else {
        return this.dataObj.filterNames
      }
    },
  },
  watch: {
    checkedNodes(val) {
      if (val.checked.length === 0) {
        this.reset()
      }
    },
  },
  mounted() {
    this.initActive()
  },
  methods: {
    initActive() {
      if (this.defaultActive && this.defaultActive.length > 0) {
        this.active = this.defaultActive
      }
    },
    handleOpenBtn() {
      this.isOpen = !this.isOpen
    },

    getCheckedNodes() {
      const { active } = this
      const { label, key, filterNames } = this.dataObj
      const checked = filterNames.filter((d) => active.includes(d.value))
      return {
        label,
        key,
        checked,
        filterNames,
      }
    },

    handleItemClick(key) {
      const { multiple, active } = this
      if (key === 'all') {
        this.active = []
      } else if (multiple) {
        if (active.includes(key)) {
          const i = active.findIndex((d) => d === key)
          active.splice(i, 1)
        } else {
          this.active.push(key)
        }
      } else {
        this.active = [key]
      }

      const nodes = this.getCheckedNodes()

      this.$emit('update:checkedNodes', nodes)
    },

    reset() {
      this.active = []
    },

    // setActive(key) {
    //   this.active = [key]
    // },
  },
})
</script>
<style lang="scss" scoped>
.filter-layout-wapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 0 37px 0 135px;
  color: #373c51;
  font-size: 16px;

  .label {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 36px;
    color: #898faa;
  }

  .all {
    position: absolute;
    left: 85px;
    top: 0;
    line-height: 36px;
    cursor: pointer;
  }

  .filter-names-ul {
    .filter-names-li {
      height: 36px;
      line-height: 36px;
      display: inline-block;
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .no-all {
    margin-left: -50px;
  }

  .active {
    color: #006eff;
  }

  .open {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 36px;
    cursor: pointer;
    color: #888888;
  }
}
</style>
